<html>
  <head>
    <script type="application/javascript">
      /** @type {HTMLCanvasElement} */
      function draw() {
        var ctx = document.getElementById("canvas").getContext("2d");
        // 创建新 image 对象，用作图案
        var img = new Image();
        img.src = "https://www.w3school.com.cn/i/lamp.gif";
        // 等待图片加载完成
        img.onload = function () {
          // 创建图案
          var ptrn = ctx.createPattern(img, "repeat");
          ctx.fillStyle = ptrn;
          ctx.fillRect(0, 0, 150, 150);
        };
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>
